<template>
  <a-modal
    :visible="visible"
    title="选择教室"
    :width="900"
    @cancel="() => { $emit('cancel') }"
    @ok="comfirm"
  >
    <a-row>
      <a-col :md="8" :sm="12" style="margin-bottom:10px;">
        <a-col :span="8">校区：</a-col>
        <a-col :span="15">
          <a-select style="width:100%" allowClear v-model="searchForm.jsxq">
            <a-select-option v-for="i in selectMenu.campusList" :key="i.id" :value="i.xqbh">{{ i.xqmc }}</a-select-option>
          </a-select>
        </a-col>
      </a-col>
      <a-col :md="8" :sm="12" style="margin-bottom:10px;">
        <a-col :span="8">教室类型：</a-col>
        <a-col :span="15">
          <a-select style="width:100%" allowClear v-model="searchForm.typeCode">
            <a-select-option v-for="i in TYPE0046" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
          </a-select>
        </a-col>
      </a-col>
      <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
    </a-row>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
      :pagination="{ pageSize: 10 }"
      :scroll="{ y: 300 }"
    >
      <div
        slot="expandedRowRender"
        slot-scope="record"
        style="margin: 0">
        <div v-for="pk in record.pkxxs" :key="pk.id" style="margin-bottom: 5px;">
          {{ pk.kcbm }}&nbsp;
          {{ pk.kcmc }}&nbsp;
          {{ pk.kclbmc }}&nbsp;
          {{ pk.skzlxmc }}&nbsp;
          开始周：{{ pk.ksz }}&nbsp;
          结束周：{{ pk.jsz }}&nbsp;
          {{ pk.skzmc }}&nbsp;
          开始课节：{{ pk.kskj }}&nbsp;
          结束课节：{{ pk.jskj }}&nbsp;
        </div>
      </div>
    </s-table>

  </a-modal>

</template>

<script>
import { mapState } from 'vuex'
import { STable } from '~'
import DetailList from '~/tool/DetailList'
const DetailListItem = DetailList.Item

export default {
  props: ['visible', 'editId'],
  components: {DetailList, DetailListItem, STable},
  data () {
    return {
      searchForm: {},
      selectMenu: {},
      columns: [
        {
          title: '校区',
          dataIndex: 'jsxqmc'
        },
        {
          title: '教室类型',
          dataIndex: 'typeCodeName'
        },
        {
          title: '教室名称',
          dataIndex: 'classroomNo'
        },
        {
          title: '位置',
          dataIndex: 'location'
        },
        {
          title: '容量',
          dataIndex: 'capacity'
        }
      ],
      loadData: parameter => {
        parameter.pageNum = parameter.pageNo
        let params = Object.assign(this.searchForm, parameter)
        return this.$api.cultivate.classroomExamList(params).then(res => {
          return {
            data: res.data.rows,
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize,
            totalPage: Math.ceil(res.data.total / parameter.pageSize),
            totalCount: res.data.total
          }
        }).catch(() => {
          return {
            data: [],
            pageNo: 1,
            pageSize: 10,
            totalPage: 1,
            totalCount: 0
          }
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    }
  },
  computed: {
    ...mapState({
      TYPE0046: state => state.app['TYPE0046']
    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0046')
    this.$api.base.campusAll().then(res => {
      this.selectMenu.campusList = res.data
    })
  },
  methods: {
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    comfirm () {
      if (!this.selectedRowKeys.length) {
        return this.$emit('cancel')
      } else if (this.selectedRowKeys.length > 1) {
        return this.$message.warn('只能选择一个教室')
      }
      this.$emit('updateEx', {
        xqmc: this.selectedRows[0].jsxqmc,
        typeCodeName: this.selectedRows[0].typeCodeName,
        kcjsbh: this.selectedRows[0].classroomNo,
        ...this.selectedRows[0]
      })
      this.$emit('cancel')
    }
  }
}
</script>

<style>

</style>
